<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="练习账号: ">
          <!-- <el-input v-model="queryParams.studentID" placeholder="请选择学员"  @keyup.enter="onSearch"  style="width: 180px;"/> -->
          <el-select
            filterable
            v-model="queryParams.studentID"
            placeholder="请选择练习账号" 
            style="width: 180px;"
            clearable
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.name+item.phone+item.account"
              :value="item.id"
            >
                <span>{{ item.name }}-{{ item.phone }}</span>
                <span style="float: right;color: #c7c7c7;">{{ item.account }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生日期: ">
            <el-date-picker
                style="width: 180px;"
                v-model="queryParams.occurrenceDate"
                type="date"
                placeholder="请选择发生日期"
                size="small"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div >
      <ColumnSetting v-model:columnList="columnList" />
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :data="tableData"
        row-key="id"
        :height="tableHeight"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
      >
        <el-table-column type="index" label="序号" width="80" fixed/>
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='status'">
                <div v-if="scope.row.status==1">
                    <el-tag type="primary">正常</el-tag>
                </div>
                <div v-else>  
                    <el-tag type="info">禁用</el-tag>
                </div>
              </template>
              <template v-else-if="item.prop=='password'">
                <el-tooltip
                  v-if="isNotBlank(scope.row.password)"
                  class="box-item"
                  effect="dark"
                  :content="scope.row.password"
                  placement="bottom-start"
                  :teleported="true"
                >
                  <span>******</span>
                </el-tooltip>
              </template>
              <template v-else-if="item.prop=='loginPassword'">
                <el-tooltip
                  v-if="isNotBlank(scope.row.loginPassword)"
                  class="box-item"
                  effect="dark"
                  :content="scope.row.loginPassword"
                  placement="bottom-start"
                  :teleported="true"
                >
                  <span>******</span>
                </el-tooltip>
              </template>
              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
             <template #default="scope">
              <el-button  size="small" link type="success"  @click="detailRow(scope.row.id)" ><el-icon><View /></el-icon> 详情</el-button>
            </template>
          </el-table-column> -->
        </template>
      </el-table>
    </div>
  </div>
</template>
<script>
import { selectByPage, getById } from "@/api/oss/capitalSummary.js"
import { getAll } from '@/api/oss/student.js'
import { mapState } from 'vuex'
export default {
    components:{
    },
    data() {
        return {
            tableTotal: 0,
            tableLoading: false,
            tableData: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 2000,
                account:'',
                occurrenceDate:'',
            },
            columnList:[
              {prop:'studentAccount',label:'练习账号',sortable:false,sort:1,hide:false,fixed:true,width:150},
              {prop:'occurrenceDate',label:'发生日期',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'previousDayBalance',label:'期初权益',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'marketValueEquity',label:'市值权益',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'positionValue',label:'持仓市值',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'marginOccupy',label:'保证金占用',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'availableAmount',label:'可用资金',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'riskExposure',label:'风险度',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'totalProfitLoss',label:'累计盈亏',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'historyDepositTotal',label:'历史入金总额',sortable:false,sort:6,hide:false,fixed:false,width:150},
              {prop:'action',label:'操作',sortable:false,sort:14,hide:false,fixed:'right',width:200},
            ],
            tableHeight:(window.innerHeight - 380) + 'px',
             // 学员列表
             studentList:[],
             // 详情弹窗的开关
             dialogVisible:false,
             // 行数据对象
             rowData:""
        }
    },
    created() {
        // 列按照sort升序
        this.columnList.map((item,index)=>{item.sort = index+1; return item; })
        this.selectByPage()
    },
    computed:{
        ...mapState(['amplify'])
    },
    mounted(){
        this.$nextTick(()=>{
            this.countTableHeight()
            // 获取所有学员信息
            getAll({}).then(res=>{
              if (res.code == 1) {
                  this.studentList = res.data
              }
            })
        })
    },
    methods: {
      detailRow(id){
        console.log("查看详情id:",id);
        this.dialogVisible = true;
        getById({"id":id}).then(res=>{
          if (res.code == 1) {
              this.rowData = res.data
          }
        })
      },
      // 搜索事件
      onSearch() {
          this.queryParams.pageNo = 1
          this.selectByPage()
      },
      // 分页查询事件
      selectByPage() {
          this.tableLoading = true
          selectByPage(this.queryParams).then((res) => {
              this.tableLoading = false
              if (res.code === 1) {
                  this.tableData = res.data
              }
          }).catch(() => {
              this.tableLoading = false
          })
      },
      // 表格高度
      countTableHeight(){
        let tableHeight = (window.innerHeight - 380) + 'px'
        // 计算搜索区域
        var searchContainerList =  document.getElementsByClassName("searchContainer")
        if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                  let searchContainerHeight = searchContainerList[0].offsetHeight
                  // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                  let staticHeight = 60+38+30+15
                  if (this.amplify == true) {
                      // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                      tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                  } else {
                      tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                  }
                  this.tableHeight = tableHeight
              }
      },
    },
    watch: {
		amplify(newValue,oldValue) {
			this.countTableHeight()
		},
	},
}
</script>
<style scoped>
[class*=el-col-] {
    box-sizing: border-box;
    /* border: solid 1px red; */
}
.capitalDetailTable,
.inoutCapitalTable {
  width: 98%;
  border-collapse:collapse;
  margin: auto;

}
.capitalDetailTable td {
  width:25%;
  border: solid 1px #b1afaf;
  text-align: left;
  color: black;
}
.inoutCapitalTable td {
  width:20%;
  border: solid 1px #b1afaf;
  text-align: center;
  color: black;
}
.priceTD {
  text-align: right !important;
}
td {
  padding-right: 5px;
}
:deep(.el-scrollbar) {
    text-align: left;
}
</style>